<template>
  <div id="newdisc">
    <el-row type="flex" justify="center">
      <el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
        <div class="tab-song">
          <router-link
            to="/homepage/contents/newestsong"
            tag="div"
            class="song-express"
            :class="{ active: tabSong === 0 }"
            @click="tabSong = 0"
          >
            新歌速递
          </router-link>
          <router-link
            to="/homepage/contents/newdisc"
            tag="div"
            class="song-putaway"
            :class="{ active: tabSong === 1 }"
            @click="tabSong = 1"
          >
            新碟上架
          </router-link>
        </div>
        <div class="hd-title">
          <ul>
            <li
              v-for="(item, index) in songExpress"
              :key="index"
              :class="{ active: tag === index }"
              @click="
                tabTag(item.type);
                tag = index;
              "
            >
              {{ item.name }}
            </li>
          </ul>
          <div class="btns">
            <p
              class="btns-recommend"
              :class="{ active: btnsact === 0 }"
              @click="btnsact = 0"
            >
              推荐
            </p>
            <el-divider direction="vertical" class="line"></el-divider>
            <p
              class="btns-all"
              :class="{ active: btnsact === 1 }"
              @click="btnsact = 1"
            >
              全部
            </p>
          </div>
        </div>
        <ul class="list">
          <li v-for="(item, index) in songList" :key="index"
          @click=" play(item)">
            <div class="images">
              <img :src="item.picUrl" alt="" />
            </div>
            <p class="name webkit-box">{{ item.name }}</p>
            <p class="artists">{{ item.artists[0].name }}</p>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "newdisc",
  data() {
    return {
      isbool: true,
      count: 2,
      btnsact: 0,
      tabSong: 1,
      tag: 0,
      songExpress: [
        {
          type: "ALL",
          name: "全部",
        },
        {
          type: "ZH",
          name: "华语",
        },
        {
          type: "EA",
          name: "欧美",
        },
        {
          type: "JP",
          name: "日本",
        },
        {
          type: "KR",
          name: "韩国",
        },
      ],
      songList: [],
    };
  },
  created() {
    this.axios({
      withCredentials: true,
      method: "get",
      url: "https://music.hzbiz.net/album/new?timetamp=" + new Date().getTime(),
      params: {
        limit: 30,
        area: "ALL",
      },
    }).then((res) => {
      this.songList = res.data.albums;
      console.log(res.data);
    });
  },
  mounted() {
    window.addEventListener("scroll", () => {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop; //滚动条距离顶部的高度
      let scrollHeight = document.documentElement.offsetHeight; //当前页面的总高度
      let clientHeight = document.documentElement.clientHeight; //当前可视的页面高度
      if (scrollTop + clientHeight >= scrollHeight - 50 && this.isbool) {
        //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
        this.isbool = false;
        console.log(this.$store.state.flag);
        this.axios({
          method: "get",
          withCredentials: true,
          url:
            "https://music.hzbiz.net/album/new?timetamp=" +
            new Date().getTime(),
          params: {
            limit: 30,
            offset: (this.count - 1) * 30,
            area: this.$store.state.flag,
          },
        }).then((res) => {
          this.songList.push(...res.data.albums);
          console.log(this.songList);
          this.isbool = true;
          this.count++;
        });
      }
    });
  },
  methods: {
    //标签切换
    tabTag(index) {
        this.$store.commit("saveDisc",index)
        console.log(this.$store.state.flag);
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/album/new?timetamp=" + new Date().getTime(),
        params: {
          limit: 30,
          area: index,
        },
      }).then((res) => {
        this.songList = res.data.albums;
      });
    },
  },
};
</script>

<style  scoped>
.tab-song {
  margin: 0 auto;
  width: 234px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tab-song > div {
  width: 50%;
  border-radius: 16px;
  cursor: pointer;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab-song > div:hover {
  background-color: #f1efef;
}
.tab-song > div.active {
  color: #ffffff;
  background-color: #bbbbbb;
}
.hd-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.hd-title .btns {
  display: flex;
}
.hd-title .btns p {
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 16px;
  cursor: pointer;
}
.hd-title .btns p.active {
  background-color: #fdf5f5;
  color: #ec4141;
}
.hd-title .btns .line {
  margin-top: 3px;
}
.hd-title ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.hd-title ul li {
  margin-left: 27px;
  cursor: pointer;
}
.hd-title ul li:hover {
  color: rgb(19, 18, 18);
}
.hd-title ul li.active {
  color: #000;
  font-weight: bold;
}
.list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.list li {
  width: 177px;
  margin-bottom: 20px;
  cursor: pointer;
}
.list li:not(:nth-child(5n)) {
  margin-right: 20px;
}
.list li .images {
  height: 177px;
  overflow: hidden;
  border-radius: 5px;
}
.list li p.name {
  color: #000;
  -webkit-line-clamp: 2;
  margin: 10px 0;
  line-height: 18px;
}
.list li p.artists {
  font-size: 12px;
  color: slategrey;
}
</style>